<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>

    <!-- 

        1 雪碧图
            把所有小图标整合在一张图片上
            实现的核心   背景位置的改变    background-position
            优点：减少服务器请求的次数，减少图片的体积
            缺点：不利于维护

        2 浏览器
            5大内核：Trident(IE)   Gecko(FF)   Webkit(chrome / safari)   Presto(O)  blink(谷歌和欧朋共同开发)

            浏览器兼容
                filter 
                浏览器前缀   -ms-    -moz-      -webkit-       -o-      

        3 css3的属性
            背景尺寸  background-size:cover / contain / 宽高 高度
            背景渐变  linear-gradient(90deg , red 50% , blue 50%)      radial-gradient(circle , red , blue)


        4 弹性布局
            flex-shrink   收缩
            flex-grow     扩展

            单行或者多行省略的时候，会遇到子元素撑大父元素的问题    父元素写宽度(overflow:hidden)

            弹性布局中   高度会发生"继承"                align-items:flex-start / stretch

            align-content
     -->
    
</body>
</html>